<template>

    <v-data-table
            :headers="headers"
            :items="desserts"
            sort-by="calories"
            class="elevation-1"
            :search="search"
            v-loading="loading"
    >
        <template v-slot:top>
            <v-toolbar
                    flat
            >
                <v-divider
                        class="mx-4"
                        inset
                        vertical
                ></v-divider>
                <v-spacer></v-spacer>
                <v-text-field
                        v-model="search"
                        append-icon="mdi-magnify"
                        label="搜索"
                        single-line
                        hide-details
                ></v-text-field>
                <v-dialog
                        v-model="dialog"
                        max-width="500px"
                >

                    <v-card>
                        <v-card-title>
                            <span class="text-h5">{{ formTitle }}</span>
                        </v-card-title>

                        <v-card-text>
                            <v-container >
                                <v-row >
                                    <v-col
                                            cols="12"
                                            sm="6"
                                            md="4"
                                    >
                                        <v-text-field
                                                v-model="editedItem.id"
                                                label="id"
                                                :disabled="true"
                                        ></v-text-field>
                                    </v-col>
                                    <v-col
                                            cols="12"
                                            sm="6"
                                            md="4"
                                    >
                                        <v-text-field
                                                v-model="editedItem.userName"
                                                label="用户名"
                                        ></v-text-field>
                                    </v-col>
                                    <v-col
                                            cols="12"
                                            sm="6"
                                            md="4"
                                    >
                                        <v-text-field
                                                v-model="editedItem.roleName"
                                                label="角色名"
                                        ></v-text-field>
                                    </v-col>
                                    <v-col
                                            cols="12"
                                            sm="6"
                                            md="4"
                                    >
                                        <v-text-field
                                                v-model="editedItem.roleDesc"
                                                label="角色标签"
                                        ></v-text-field>
                                    </v-col>
                                    <v-col
                                            cols="12"
                                            sm="6"
                                            md="4"
                                    >
                                        <div class="block">
                                            <el-cascader
                                                    v-model="selectedOptions"
                                                    placeholder="权限"
                                                    :options="options"
                                                    :props="props"
                                                    collapse-tags
                                                    clearable
                                           ></el-cascader>
                                        </div>
                                    </v-col>

                                </v-row>

                            </v-container>
                        </v-card-text>

                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn
                                    color="blue darken-1"
                                    text
                                    @click="close"
                            >
                                取消
                            </v-btn>
                            <v-btn
                                    color="blue darken-1"
                                    text
                                    @click="save"
                            >
                                确定
                            </v-btn>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
                <v-dialog v-model="dialogDelete" max-width="500px">
                    <v-card>
                        <v-card-title class="text-h5">你真的想删掉吗</v-card-title>
                        <v-card-actions>
                            <v-spacer></v-spacer>
                            <v-btn color="blue darken-1" text @click="closeDelete">取消</v-btn>
                            <v-btn color="blue darken-1" text @click="deleteItemConfirm">确定</v-btn>
                            <v-spacer></v-spacer>
                        </v-card-actions>
                    </v-card>
                </v-dialog>
            </v-toolbar>
        </template>

        <template v-slot:item.actions="{ item }">
            <v-icon
                    small
                    class="mr-2"
                    @click="editItem(item)"
            >
                mdi-pencil
            </v-icon>
            <v-icon
                    small
                    @click="deleteItem(item)"
            >
                mdi-delete
            </v-icon>
        </template>

        <template v-slot:no-data>
            <v-btn
                    color="primary"
                    @click="initialize"
            >
                重置
            </v-btn>
        </template>
        <template v-slot:item.roleDesc="{ item }">
            <v-chip
                    :color="getColor(item.roleDesc)"
                    dark
            >
                {{ item.roleDesc }}
            </v-chip>
        </template>
    </v-data-table>
</template>

<script>
    import { Message} from 'element-ui'
    import * as role from "../../api/role";
    import * as perm from '../../api/perm'
    export default {
        data: () => ({
            props: { multiple: true,value:'permTag', label:'permName'},
            options: [],
            selectedOptions:[
            ],
            dialog: false,
            dialogDelete: false,
            search: '',
            headers: [
                {
                    text: 'id',
                    align: 'start',
                    sortable: true,
                    value: 'id',
                },
                { text: '用户名', value: 'userName' },
                { text: '角色名', value: 'roleName' },
                { text: '角色标签', value: 'roleDesc' },
                { text: '操作', value: 'actions', sortable: false },
            ],
            desserts: [],
            editedIndex: -1,
            loading: true,
            editedItem: {
                id: 0,
                userName: "",
                roleName: "",
                roleDesc: "",
            },
            defaultItem: {
                id: 0,
                userName: "",
                roleName: "",
                roleDesc: "",
            },
        }),

        computed: {
            formTitle () {
                return this.editedIndex === -1 ? '添加' : '编辑'
            },
        },

        watch: {
            dialog (val) {
                val || this.close()
            },
            dialogDelete (val) {
                val || this.closeDelete()
            },
            // eslint-disable-next-line no-unused-vars
            $route: {
                // eslint-disable-next-line no-unused-vars
                handler: function(val){
                    this.initialize();
                }
            }
        },

        created () {
            this.initialize()
            this.initOptions()
        },

        methods: {
           async initOptions(){
                let options=[]
                await perm.getAllPerms().then(function (response) {
                   options=response.data.data
                })
                this.options =options
            },
            initialize () {
                this.loading=true;
                let that=this
                role.getAllUserRole().then(function (response) {
                    that.desserts = response.data.data
                })
                this.loading=false

            },
            getColor (roleDesc) {
                if (roleDesc ==="管理员") return 'red'
                else if (roleDesc ==="游客") return 'blue'
                else return 'green'
            },

            async editItem (item) {
                this.editedIndex = this.desserts.indexOf(item)
                this.editedItem = Object.assign({}, item)
                let selected=[]
                await perm.getOnePerms(this.editedItem.userName).then(function (response) {
                    selected=response.data.data
                })
                this.selectedOptions=selected
                this.dialog = true
            },

            deleteItem (item) {
                this.editedIndex = this.desserts.indexOf(item)
                this.editedItem = Object.assign({}, item)
                this.dialogDelete = true
            },

            async deleteItemConfirm () {
                let code =0
                await perm.deleteOne(this.editedItem.id).then(function (response) {
                    console.log(response)
                    code=response.data.code
                })
                if(code===200) {
                    this.desserts.splice(this.editedIndex, 1)
                }else{
                    Message.error("删除失败")
                }
                this.closeDelete();

            },

            close () {
                this.dialog = false
                this.$nextTick(() => {
                    this.editedItem = Object.assign({}, this.defaultItem)
                    this.editedIndex = -1
                })
                this.selectedOptions=null
            },

            closeDelete () {
                this.dialogDelete = false
                this.$nextTick(() => {
                    this.editedItem = Object.assign({}, this.defaultItem)
                    this.editedIndex = -1
                })
            },

            async save () {
                if (this.editedIndex > -1) {
                    let data= this.editedItem
                    data['perms']=this.selectedOptions
                    let code=0
                    await perm.updateOnePerms(data).then(function (response) {
                        code=response.data.code
                    })
                    if(code===200){
                        Object.assign(this.desserts[this.editedIndex], this.editedItem);
                    }else{
                        Message.error("编辑失败")
                    }
                } else {
                    this.desserts.push(this.editedItem);
                }
                this.close();

            },
        },
    }
</script>

<style scoped>
.block{
    position: relative;
    top: 15%;
}
</style>
